<template>
	<div ref="chartDom" class="chart"></div>
</template>

<script setup lang="ts" name="BubbleECharts">
import { right } from '@popperjs/core';
import * as echarts from 'echarts';
import { getTalentInnovateQuality } from '/@/api/cx/list';
const chartDom = ref();
let myChart = null;
const data = ref([
]);
function mapInit() {
	myChart = echarts.init(chartDom.value);

	// const data = [
	// 	[
	// 		[28, 77, '蒋荣杰', 1990],
	// 		[31, 77.4, '胡晓冬', 1990],
	// 		[15, 68, '陈智军', 1990],
	// 		[13, 74.7, '杜林', 1990],
	// 		[28, 75, '王为彬', 1990],
	// 		[29, 77.1, '杜琳琳', 1990],
	// 		[31, 75.4, '陈智军', 1990],
	// 		[28, 78.1, '陆潇晓', 1990],
	// 		[17, 57.7, '沈逸舟', 1990],
	// 		[29, 79.1, '杜林琳', 1990],
	// 		[20, 67.9, '叶琛', 1990],
	// 		[12, 72, '沈逸周', 1990],
	// 		[24, 75.4, '路远航', 1990],
	// 		[43, 76.8, '张三', 1990],
	// 		[10, 70.8, '张三', 1990],
	// 		[19, 69.6, '张三', 1990],
	// 		[10, 67.3, '张三', 1990],
	// 		[26, 75.7, '张三', 1990],
	// 		[37, 75.4, '张三', 1990],
	// 	],
	// 	[
	// 		[44, 81.8, '张三', 2015],
	// 		[43, 81.7, '张三', 2015],
	// 		[13, 76.9, '张三', 2015],
	// 		[21, 78.5, '张三', 2015],
	// 		[38, 80.8, '张三', 2015],
	// 		[37, 81.9, '张三', 2015],
	// 		[44, 81.1, '张三', 2015],
	// 		[42, 82.8, '张三', 2015],
	// 		[59, 66.8, '张三', 2015],
	// 		[36, 83.5, '张三', 2015],
	// 		[13, 71.4, '张三', 2015],
	// 		[34, 80.7, '张三', 2015],
	// 		[34, 80.6, '张三', 2015],
	// 		[64, 81.6, '张三', 2015],
	// 		[24, 77.3, '张三', 2015],
	// 		[23, 73.13, '张三', 2015],
	// 		[19, 76.5, '张三', 2015],
	// 		[38, 81.4, '张三', 2015],
	// 		[53, 79.1, '张三', 2015],
	// 	],
	// ];
	const option = {
		// legend: {
		// 	right: '10%',
		// 	top: '3%',
		// 	//data: ['1990', '2015'],
		// },
		grid: {
			left: '8%',
			right: '5%',
			top: '10%',
			bottom: '15%',
		},
		xAxis: {
			name: '发明专利占授权专利比',
			nameLocation: 'middle',
			nameTextStyle: {
				padding: [15, 0, 0, 0],
			},
			splitLine: {
				lineStyle: {
					type: 'dashed',
				},
			},
			axisLabel: {
				formatter: '{value} %',
			},
		},
		yAxis: {
			name: '被引用专利占总申请量的比',
			axisLabel: {
				formatter: '{value} %',
			},
			splitLine: {
				lineStyle: {
					type: 'dashed',
				},
			},
			scale: true,
		},
		dataZoom: [
			{
				type: 'inside',
			},
			{
				type: 'slider',
			},
		],
		tooltip: {
			padding: 5,
			borderWidth: 1,
			formatter: function (param) {
				let value = param.value;
				return `${value[2]}<br>发明专利占授权专利比:${value[0]}% <br>被引用专利占总申请量的比:${value[1]}%`;
			},
		},
		series: [
			{
				name: '人才创新质量',
				data: data.value,
				type: 'scatter',
				symbolSize: function (data) {
					//return (Number(data[0]) + Number(data[1])) / 2;
					return 5
				},

				emphasis: {
					focus: 'series',
					label: {
						show: true,
						formatter: function (param) {
							return param.data[2];
						},
						position: 'top',
					},
				},
				itemStyle: {
					shadowBlur: 10,
					shadowColor: 'rgba(120, 36, 50, 0.5)',
					shadowOffsetY: 5,
					color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
						{
							offset: 0,
							color: 'rgb(251, 118, 123)',
						},
						{
							offset: 1,
							color: 'rgb(204, 46, 72)',
						},
					]),
				},
			},
		],
	};

	option && myChart.setOption(option);
}
function init(query: any) {
	getTalentInnovateQuality(query).then((res) => {
		if (res.code == 0) {
			data.value = res.data;
			mapInit();
		}
	});
}
defineExpose({
	init,
});
</script>

<style lang="scss" scoped>
.chart {
	height: 600px;
	width: 100%;
}
</style>
